<template>
    <el-container style="text-align: right; font-size: 12px">
        <!--********** 头部 -->
        <el-header style="height:auto"
                   :class="addpadding">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto"
                 :class="bacColor">
            <div class="mo_login">
                <div class="addbreadcrumb">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>余额</el-breadcrumb-item>

                    </el-breadcrumb>
                </div>

                <div class="periphery"
                     :class="bacColor">
                    <!-- <div class="person-left">
                        <div class="person-name">

                            <el-avatar shape="square"
                                       size="large"
                                       :src="squareUrl">
                                <i class="el-icon-s-custom  add-i"></i>
                            </el-avatar>

                            <div> {{userName}}</div>

                        </div>
                        <div class="person-list">
                            <i class="el-icon-coin"></i>
                            我的钱包 -->

                    <!-- <div class="person-list-two"> 充值 </div>
                            <div class="person-list-two">消费记录</div>
                            <div class="person-list-two">充值记录</div> -->
                    <!-- </div>
                    </div> -->

                    <div class="money-right">
                        <div class="money-details">
                            <div class="money-addline">我的余额</div>
                            <div class="money-num">{{userMoney}}元</div>
                            <div class="money-recharge">
                                <el-button class="money-botton"
                                           type="danger"
                                           @click="ToMyPayA()">去充值</el-button>
                            </div>
                            <div class="money-addborder"> </div>
                            <div class="money-explain">余额规则说明</div>

                            <div class="money-text">
                                <p class="money-text-p">1. 购买的余额一经使用，概不支持退款或返现。</p>
                                <p class="money-text-p">2. 余额的获得均需在视界信息联盟网站内完成，通过任何第三方平台或软件获得余额均属于非正当途径，并极有可能造成您的信息泄露。如经过查证，确认用户通过非法途径获得余额，我们将冻结其视界信息联盟帐户并取消所获得全部余额。
                                </p>
                                <p class="money-text-p">3. 为维护网站准则，营建良好的网站社区氛围，避免您的信息安全与网站资产受到损失，我们建议您通过正规渠道（视界信息联盟站内）获得余额。</p>
                                <p class="money-text-p">4.网站广告特推、头条广告推广请联系客服，客服热线：18487351868</p>
                                <p class="money-text-p">5.网站最终解释权归视界信息联盟所有。 </p> <br>
                                <p class="money-text-p-6">网站合作热线：13116235758 </p>
                            </div>
                            <div class="money-explain"><br> </div>

                            <div class="money-explain addfont">视界信息联盟面向社会合作及人才招聘</div>
                            <div class="money-explain">一、合作、服务方式：</div>
                            <div class="money-text">
                                <p class="money-text-p">A、网站合作，其它项目合作（企业、商家、个人均可）;</p>
                                <p class="money-text-p">B、广告、信息类网站、推广平台，互挂网站合作;</p>
                                <p class="money-text-p">C、各自营平台网站挂网，展示合作;</p>
                                <p class="money-text-p">D、企业、商家资源类网站挂网合作;</p>
                                <p class="money-text-p">E、企业、商家、业务板块信息展示、交易服务合作;</p>
                                <p class="money-text-p">F、企业、商家固定板块业务推广、广告位服务业务;</p>
                                <p class="money-text-p">G、企业、商家、个体、用户信息发布展示服务;</p>
                            </div>
                            <div class="money-explain">二、招商业务：</div>
                            <div class="money-text">
                                <p class="money-text-p">A、网站推广、线下业务拓展、资源维护;</p>
                                <p class="money-text-p">B、站内板块市场资源拓展、项目业务拓展;</p>
                            </div>

                            <div class="money-explain"> 三、面向全国人才招聘（应聘者请在平台留言板发布应聘信息及个人有效联系方式，请注意平台回复信息、录用通知及上岗需提交资料）</div>

                            <div class="money-text">
                                <p class="money-text-p">平台职员晋升机制：</p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> 级 别 </span>
                                    <span class="showdistance2"> 职 位 </span>
                                    <span class="showdistance3"> 技术 </span>
                                    <span class="showdistance4"> 薪资标准（当月业绩：次月1-3号结算，4-5号复核，6号发放薪资，16号发放奖金，节假日顺延）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P01 </span>
                                    <span class="showdistance2"> 业务员 </span>
                                    <span class="showdistance3">  </span>
                                    <span class="showdistance4"> 个人总业绩10%提点 + 奖金（超额业绩部分15%）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P02 </span>
                                    <span class="showdistance2"> 部门经理 </span>
                                    <span class="showdistance3"> 技术员 </span>
                                    <span class="showdistance4"> 部门总业绩提点2% + 个人业绩10%提点 + 奖金（超额业绩部分5%）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P03 </span>
                                    <span class="showdistance2"> 区域经理 </span>
                                    <span class="showdistance3"> 项目经理 </span>
                                    <span class="showdistance4"> 区域总业绩提点1% + 公司股份1000股（分红）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P04 </span>
                                    <span class="showdistance2"> 项目总监 </span>
                                    <span class="showdistance3"> 技术工程师 </span>
                                    <span class="showdistance4"> 项目总业绩提点1% + 公司股份5000股（分红）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P05 </span>
                                    <span class="showdistance2"> 省区副总 </span>
                                    <span class="showdistance3"> 架构工程师 </span>
                                    <span class="showdistance4"> 省区业绩总利润提点0.4% + 公司股份20000股（分红）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P06 </span>
                                    <span class="showdistance2"> 省区总经理 </span>
                                    <span class="showdistance3"> 研发总监 </span>
                                    <span class="showdistance4"> 省区业绩总利润提点0.5% + 公司股份30000股（分红）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1">P07 </span>
                                    <span class="showdistance2">分公司总经理 </span>
                                    <span class="showdistance3">  </span>
                                    <span class="showdistance4"> 分公司总业绩利润提点0.6% + 公司股份50000股（分红）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P08 </span>
                                    <span class="showdistance2"> 项目执行董事 </span>
                                    <span class="showdistance3">  </span>
                                    <span class="showdistance4"> 项目总业绩1% + 公司股份60000股（分红）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P09 </span>
                                    <span class="showdistance2"> 项目合伙人 </span>
                                    <span class="showdistance3">  </span>
                                    <span class="showdistance4"> 项目持股股份（分红） + 公司持股股份（分红） + 工作岗位业绩提点（按实际所在岗位薪资标准计算 ）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P10 </span>
                                    <span class="showdistance2"> 分公司合伙人 </span>
                                    <span class="showdistance3">  </span>
                                    <span class="showdistance4"> 分公司持股股份（分红） + 公司持股股份（分红） + 工作岗位业绩提点（按实际所在岗位薪资标准计算）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P11 </span>
                                    <span class="showdistance2"> 公司永久合伙人 </span>
                                    <span class="showdistance3">  </span>
                                    <span class="showdistance4"> 公司持股总股份（分红） + 工作岗位业绩提点（按实际所在岗位薪资标准计算）</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P12 </span>
                                    <span class="showdistance2"> 公司地区执行总裁 </span>
                                    <span class="showdistance3">  </span>
                                    <span class="showdistance4"> 公司持股总股份（分红） + 公司地区总业绩利润0.1%提点</span>
                                </p>
                                <p class="money-text-p">
                                    <span class="showdistance1"> P13 </span>
                                    <span class="showdistance2"> 全球执行总裁 </span>
                                    <span class="showdistance3">  </span>
                                    <span class="showdistance4"> 公司持股总股份（分红） + 全球公司总业绩利润0.05%提点</span>
                                </p>
                                <p class="money-text-p">1、公司全程线上办公，工作地点不限，上班时间自由，无需打卡，无绩效考核。每周一由部门经理负责工作汇报总结，逐级向上汇报工作情况。</p>
                                <p class="money-text-p">2、对违规收取客户费用、给客户承诺不实行为、造谣、影响公司声誉、损害客户和公司利益者严格处理，公司将对其上级领导逐级追责。</p>
                                <p class="money-text-p">3、欢迎各行业合作伙伴、用户对公司违规操作职员进行检举，共同维护网站，共同发展。</p>
                                <p class="money-text-p">备注：公司股份为公司配额股份，由持有人实际出资所购得，具有股东会表决权，股份价格按其入股时公司定价计算；公司职员个人必须持有股份50000股以上并且达到P07级别方可进入董事会；职位超过P08级别，不限制股份增加份额。</p>
                                <br><br>

                                <p class="money-text-p add-text"> 视界信息联盟运营部：2020年6月2日</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </el-main>

        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>

</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eFooter from "@/components/public/Footer.vue";
import { throttle } from "../../ElementUI/public.js";

export default {
    components: {
        eHeader,
        eFooter
    },
    data() {
        return {
            bacColor: "#F0FFFE",
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            addpadding: "addpadding",
            userName: "",
            userId: 0,
            userMoney: 0
        };
    },
    created() {
        let getColor = localStorage.getItem('background-color')
        let Colorarr = getColor.slice(1, 7)
        this.bacColor = Colorarr
        this.userName = localStorage.getItem('accessName')
        this.userId = localStorage.getItem('accessId')
        this.askBalance()
    },
    mounted() {
        this.$bus.$on('changeColor', (e) => {

            this.addpadding = "addpadding";
            if (this.bacColor != e) {
                let Colorarr = e.slice(1, 7)
                this.bacColor = Colorarr
            }

        })
    },
    methods: {
        //请求余额接口
        askBalance() {
            let _this = this;

            let Url = "mybalance?m_id=" + _this.userId
            //let Url = "mybalance?m_id=1" 
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        //let adddata = resdata.data

                        _this.userMoney = resdata.balance

                        break;
                    case 1002:
                        console.log(resdata.msg)
                        break
                }

            });

        },
        //跳转充值页面
        ToMyPayA() {
            this.$router.push("/MyPayA")
        },
        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },
    }
};
</script>
<style lang="scss"  scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: hidden;
    padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    max-width: 1200px;
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 20px;

    padding: 0 10px 20px 10px;
    height: 645px;
    overflow: hidden;
    background: #fbfbfb;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }
    .addbreadcrumb {
        width: 100%;
        height: 40px;
        font-size: 14px;
        padding-top: 13px;
        padding-left: 22px;
    }
    .periphery {
        width: 100%;
        height: 635px;
        overflow-y: scroll;
        padding-top: 0px;
        //background: #f6f6f6;

        // .person-left {
        //     width: 16.7%;
        //     height: 100%;
        //     background: #ffffff;
        //     float: left;
        //     border-right: 3px solid #e4dcdc;
        //     .person-name {
        //         width: 100%;
        //         height: 120px;
        //         padding-top: 25px;
        //         text-align: center;
        //         border-bottom: 1px solid #e4dcdc;

        //         .add-i {
        //             font-size: 42px;
        //             color: $btn-color;
        //         }
        //     }
        //     .person-list {
        //         font-size: 20px;
        //         text-align: center;
        //         width: 100%;
        //         height: 25px;
        //     }
        //     .person-list-two {
        //         margin-top: 10px;
        //         font-size: 16px;
        //         text-align: center;
        //         width: 100%;
        //         cursor: pointer;
        //     }
        // }

        .money-right {
            width: 100%;
            height: 100%;
            background: #ffffff;
            float: left;
        }
        .money-details {
            width: 100%;
            height: 1250px;
            text-align: left;
            padding-left: 22px;
            padding-right: 35px;
            padding-bottom: 20px;
            background: #ffffff;
            .money-addline {
                width: 100%;
                height: 37px;
                padding-top: 15px;
                font-size: 16px;
                color: #555666;
            }
            .money-num {
                width: 80%;
                height: 39px;
                font-size: 24px;
                padding-top: 15px;
                color: #bb9444;
                float: left;
            }
            .money-recharge {
                width: 19.5%;
                height: 49px;
                padding-top: 10px;
                float: left;
                .money-botton {
                    width: 78px;
                    height: 39px;
                    font-size: 16px;
                    float: right;
                }
            }
            .money-addborder {
                width: 100%;
                margin-top: 15px;
                height: 2px;
                background: #fbfbfb;
                float: left;
            }
            .money-explain {
                width: 100%;
                height: 31px;
                padding-top: 15px;
                font-size: 14px;
                color: $btn-color;
                float: left;
            }
            .addfont {
                font-size: 18px;
            }
            .money-text {
                width: 100%;
                float: left;
                padding-top: 15px;
                .money-text-p {
                    margin-bottom: 5px;
                    .showdistance1 {
                        display: inline-block;
                        width: 50px;
                        height: 100%;
                        text-align: left;
                    }
                    .showdistance2{
                      display: inline-block;
                        width: 120px;
                        height: 100%;
                        text-align: left;
                    }
                    .showdistance3{
                      display: inline-block;
                        width: 100px;
                        height: 100%;
                        text-align: left;
                    }
                    .showdistance4{
                      display: inline-block;
                        width: 600px;
                        height: 100%;
                        text-align: left;
                    }
                    
                }
                .add-text{
                  text-align: right;
                }
                .money-text-p-6 {
                    padding-left: 9px;
                }
            }
        }
    }
}

.location-right {
    margin-left: 25%;
    width: 50%;
    float: left;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
}
.el-form-item {
    margin-right: 25px;
    margin-left: -5px;
}
.addcolor {
    color: #558ffb;
}
.addcolor:hover {
    color: #558ffb;
}
.addpadding {
    padding: 0;
}
.DAEBFF {
    background: #daebff;
}
.F5F5FD {
    background: #f5f5fd;
}
.F0FFFE {
    background: #f0fffe;
}
.el-form /deep/ .el-input__icon {
    color: #85ce61;
}
</style>